<html>
  <head>
    <link rel="stylesheet" href="../src/blunt.css" type="text/css">
  </head>
  <body>

    <div class="container auto-center h-100 row v-center h-center">
      <div class="card lg-w-30 md-w-40 sm-w-90 pt-2 pb-2 pl-2 pr-2">
        <div class="sm-col md-row lg-row md-v-center lg-v-center">
          <div class="sm-auto-center">
            <img class="rounded" src="https://randomuser.me/api/portraits/women/12.jpg">
          </div>
          <div class="sm-auto-center sm-text-center font-1p2 lg-ml-2 md-ml-2">
            <div class="sm-pt-1p3 pb-1p3 font-2p2">Erin May</div>
            <div class="purple">Software Engineer</div>
            <div class="pt-0p5 pb-0p5">emay@example.com</div>
            <div>(123) 456-7890</div>
          </div>
        </div>
      </div>
    </div>  

    <style>
      html {
        font-family: sans-serif;
      }

      .purple {
        color: #A010F0;
      }

      .rounded { 
        border-radius: 100%;
      }

      .card {
        border: 1px solid #efefef;
        box-shadow: 3px 3px 3px #efefef;
      }
    </style>

  </body>
</html>
